<template>
  <xy-page>
    <xy-search>
      <el-form>
        <el-form-item>
          <el-input class="chanlNum" placeholder="频道号" v-model="chanlNum" clearable oninput="this.value=this.value.replace(/[^0-9]/g,'')"></el-input>
          <el-date-picker
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="-"
            v-model="dateTime"
            @change="betweenDays"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="right">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button plain @click="resetForm">重置条件</el-button>
      </div>
    </xy-search>
    <el-tabs v-model="activeTab" @tab-click="getTabData">
      <el-tab-pane label="聊天记录" name="聊天记录">
        <xy-table :tableData="chatData" :loading="chatData.isLoading" @change="getChatData" :noEmpty="!chatData.list">
          <el-table-column prop="startDate" label="直播开始时间" align="center"></el-table-column>
          <el-table-column prop="sessionId" label="场次ID" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="downloadChat(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </xy-table>
        <div style="position:relative;top:-130px;text-align:center;" v-show="noData">暂无数据</div>
      </el-tab-pane>
      <el-tab-pane label="提问记录" name="提问记录">
        <xy-table :tableData="askData" :loading="askData.isLoading" @change="getAskData" :noEmpty="!askData.list">
          <el-table-column prop="startDate" label="直播开始时间" align="center"></el-table-column>
          <el-table-column prop="sessionId" label="场次ID" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="downloadAsk(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </xy-table>
        <div style="position:relative;top:-130px;text-align:center;" v-show="noData">暂无数据</div>
      </el-tab-pane>
    </el-tabs>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      appId:'',
      noData:true,
      pickerOptions: this.$utils.disabledDate(),
      sessionKey:'',
      dateTime: "",
      oldDateTime:'',
      askDownloaded:false,
      chatDownloaded:false,
      chanlNum: '',
      oldChanlNum:'',
      activeTab: "聊天记录",
      chatData: {
        isLoading:false,
        total:0,
        size:20,
        page:1,
        list: []
      },
      askData: {
        isLoading:false,
        total:0,
        size:20,
        page:1,
        list: []
      }
    };
  },
  methods: {
    betweenDays(){
      if(!this.dateTime)return
      if(this.$utils.betweenDays(this.$utils.formatDate(this.dateTime[1],'yyyy-MM-dd'),this.$utils.formatDate(this.dateTime[0],'yyyy-MM-dd'))>30){
        this.$message.error('时间跨度不能超过30天')
        this.dateTime = []
      }
    },
    downloadAsk(row){
      this.$utils.linkTo(
        this.$utils.getUrl('/admin/instance/ccb/polyv/channel/quizList/export.do',{
          appId:sessionStorage.getItem('curAccountAppId'),
          channelId:this.chanlNum,
          endTime:!row.endTime?this.$utils.formatDate(new Date()):this.$utils.formatDate(new Date(Number(row.endTime))),
          limit:1000000,
          page:1,
          startTime:row.startDate,
          'session-key':this.sessionKey
        })
      )
    },
    getTabData(page){
      if((typeof page) == 'number'){
        this.askDownloaded = false
        this.chatDownloaded = false
      }else{
        page = 1
      }
      if(this.oldDateTime && this.oldChanlNum){
        if(this.activeTab == '提问记录'){
          if(this.askDownloaded == true) return
          this.getAskData()
        }else if(this.activeTab == '聊天记录'){
          if(this.chatDownloaded == true)return
          this.getChatData()
        }
      }
    },
    getAskData(page){
      this.askData.isLoading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/view/channelSessionList.do',{
        data:{
          appId:this.appId,
          channelId: this.oldChanlNum,
          endDate: this.$utils.formatDate(this.oldDateTime[1],'yyyy-MM-dd'),
          page: page ||　this.askData.page,
          pageSize: this.chatData.size,
          startDate: this.$utils.formatDate(this.oldDateTime[0],'yyyy-MM-dd'),
        },
        success:(res)=>{
          if(res.success){
            this.askData.page = page ||　this.askData.page
            sessionStorage.setItem('dataChannelId',this.chanlNum)
            this.askDownloaded = true
            this.askData.list = res.object.contents
            this.askData.total = res.object.totalItems
            if(res.object.contents.length>0){
              for(let i=0;i<res.object.contents.length;i++){
                this.askData.list[i].startDate = this.$utils.formatDate(new Date(parseInt(res.object.contents[i].startTime)))
              }
            }
          }else{
            this.$message.error('提问记录获取失败')
          }
        },
        error:()=>{
          this.$message.error('提问记录获取失败')
        },
        complete: (res)=> {
          this.askData.isLoading = false
          if(res.code==-2){
            this.$message.error('频道不存在')
          }
        }
      })
    },
    search() {
      if(!this.chanlNum){
        this.$message.error('频道号不能为空')
        return;
      }
      if(!this.dateTime){
        this.$message.error('时间不能为空')
        return;
      }
      this.noData = false
      //聊天记录
      this.oldChanlNum = this.chanlNum
      this.oldDateTime = this.dateTime
      this.askDownloaded = false
      this.chatDownloaded = false
      if(this.activeTab == '聊天记录'){
        this.getChatData()
      }else if(this.activeTab == '提问记录'){
        this.getAskData() 
      }
    },
    getChatData(page){
      this.chatData.isLoading = true
      this.$postStream("/admin/instance/ccb/polyv/channel/view/channelSessionList.do", {
        data: {
          appId:this.appId,
          channelId: this.chanlNum,
          endDate: this.$utils.formatDate(this.dateTime[1],'yyyy-MM-dd'),
          page: page ||　this.chatData.page,
          pageSize: this.chatData.size,
          startDate: this.$utils.formatDate(this.dateTime[0],'yyyy-MM-dd'),
        },
        success: (res) => {
          if(res.success){
            this.chatData.page = page ||　this.chatData.page
            this.chatDownloaded = true
            sessionStorage.setItem('dataChannelId',this.chanlNum) 
            this.chatData.total = res.object.totalItems
            this.chatData.list = res.object.contents
            if(this.chatData.list){
              for(let i=0;i<this.chatData.list.length;i++){
                this.chatData.list[i].startDate = this.$utils.formatDate(new Date(parseInt(this.chatData.list[i].startTime)))
              }
            }
          }else{
            this.$message.error('聊天记录获取失败')
          }
        },
        error:()=>{
          this.$message.error('聊天记录获取失败')
        },
        complete: (res)=> {
          this.chatData.isLoading = false
          if(res.code==-2){
            this.$message.error('频道不存在')
          }
        }
      });
    },
    downloadChat(row) {
      this.$utils.linkTo(
        this.$utils.getUrl('/admin/instance/ccb/polyv/channel/chatHistory/export.do',{
          channelId:this.chanlNum,
          endDay:!row.endTime?this.$utils.formatDate(new Date()):this.$utils.formatDate(new Date(Number(row.endTime))),
          startDay:this.$utils.formatDate(new Date(Number(row.startTime))),
          'session-key':this.sessionKey
        })
      )
    },
    resetForm(){
      this.chanlNum = "",
      this.dateTime = ""
    }
  },
  mounted(){
    this.appId = sessionStorage.getItem('curAccountAppId')
    this.sessionKey = JSON.parse(sessionStorage.getItem('UserInfo')).sessionKey
    this.dateTime = [new Date(),new Date()]
    this.chanlNum = sessionStorage.getItem('dataChannelId')
    if(this.chanlNum){
      this.search()
    }
  }
};
</script>

<style lang="scss" scoped>
.chanlNum {
  width: 20%;
}
</style>
